You should use .onChange(of: props.barTintColor) to allow dynamic changing.

Thank you for the suggestion!

I initially tried using .onChange(of: props.barTintColor), but it doesn't seem to update the barTintColor as expected in my case. The color only reflects properly when using .onAppear.

To make sure the barTintColor reflects both on view load and during dynamic changes, I combined both .onAppear and .onChange(of:). This approach ensures that the UITabBar appearance is set correctly when the view first appears and updates dynamically when barTintColor changes.

Here is what I am going to change:

.onAppear {
    updateTabBarAppearance(with props.barTintColor)
}
.onChange(of: barTintColor) { newColor in
    updateTabBarAppearance(with newColor)
}

Is this okay? @okwasniewski

If thats the case you can do a custom extension on the view, lets keep simillar logic contained:

extension View {
  @ViewBuilder
  func tabBarTintColor(enabled: Bool) -> some View {
    self
		.onAppear {
            // Do something
         }
       .onChange(of: barTintColor) { newColor in
    // Do something
      }
  }

Doesn't it work for newer OS versions? I didn't see deprecation in the docs.

This function should ideally only call UITabBar.appearance().barTintColor. Overriding the appearance one more time can cause issues with scrollEdgeApperance.

I tried with this approach as well: UITabBar.appearance().barTintColor on iOS 17.2 simulator.

One wierd thing happening here is when I reach end by scrolling till end barTintColor disappeared.

Attaching video for reference:

@shubhamguptadream11 This looks like its related to scrollEdgeAppearance (which controls whether the tab bar should disappear when nothing is behind.

Yess

  private func updateTabBarAppearance(with barTintColor: UIColor?) {
      if (barTintColor != nil) {
          
          if #available(iOS 15.0, *) {
              let appearance = UITabBarAppearance()
              
              appearance.configureWithOpaqueBackground()
              appearance.backgroundColor = barTintColor
              
              UITabBar.appearance().standardAppearance = appearance
              UITabBar.appearance().scrollEdgeAppearance = appearance
          } else {
              UITabBar.appearance().barTintColor = barTintColor
          }
      }
  }

Why are we putting a check for iOS 15? Is barTintColor deprecated?

No, barTintColor is not deprecated. The issue I raised above requires setting scrollEdgeAppearance, which is available from iOS 15. To set this, we create a UITabBarAppearance(), making the direct use of barTintColor redundant. Instead, we use backgroundColor.

Why are we not only using barTintColor to set the tab bar's color?
This is due to the need to set scrollEdgeAppearance, as mentioned above.

Why do we check for nil for barTintColor?
We check for nil to ensure that barTintColor is applied only when the user passes it from the React Native side. This way, scrollEdgeAppearance is overridden only when barTintColor is being applied.

Let me know if you have any other suggestion.

Oh okay, now I get what you mean.

In this case we need to have one function which updates everything related to apperance.

private func configureAppearance(for appearanceType: String, appearance: UITabBarAppearance) -> UITabBarAppearance {
  switch appearanceType {
  case "opaque":
    appearance.configureWithOpaqueBackground()
  case "transparent":
    appearance.configureWithTransparentBackground()
  default:
    appearance.configureWithDefaultBackground()
  }
  
  return appearance
}

// Helper function to update the tab bar appearance
private func updateTabBarAppearance(props: TabViewProps) {
  if #available(iOS 15.0, *) {
    let appearance = UITabBarAppearance()
    UITabBar.appearance().scrollEdgeAppearance = configureAppearance(
      for: props.scrollEdgeAppearance ?? "",
      appearance: appearance
    )
    appearance.backgroundColor = props.barTintColor
    UITabBar.appearance().standardAppearance = appearance
  } else {
    UITabBar.appearance().barTintColor = props.barTintColor
  }

Then we can combine it together with onChange:

.onAppear {
      updateTabBarAppearance(props: props)
    }
    .onChange(of: props.barTintColor) { newValue in
      updateTabBarAppearance(props: props)
    }
    .onChange(of: props.scrollEdgeAppearance) { newValue in
      updateTabBarAppearance(props: props)
    }

This should also fix current bug with scrollEdgeAppearance because its not updated onAppear

Can you rebase on top of main as I've merged your recent PR, we need to also include it here

@okwasniewski
I refactored the code to handle the onAppear and onChange logic for all TabView props in one place, simplifying the update logic. I’ve tested the changes across all three props—translucent, scrollEdgeAppearance, and barTintColor—with all their possible values to ensure everything is working as expected.